<script setup>
import { onMounted } from "vue";
import { useRoute } from "vue-router";
import { storeKey, useStore } from "vuex";
import Header from "@/components/layout/Header.vue";
import Footer from "@/components/layout/Footer.vue";
import Side from "@/components/layout/Side.vue";
const route = useRoute();
const store = useStore();
onMounted(() => {
  if (route.query.token) {
    store.dispatch("user/getUserInfo", route.query.token);
  }
});
</script>

<template>
  <div class="layout">
    <Header></Header>
    <Side />
    <div class="content_container">
      <router-view v-slot="{ Component }">
        <transition name="fade" mode="out-in">
          <!-- <KeepAlive> -->
            <component :is="Component" />
          <!-- </KeepAlive> -->
        </transition>
      </router-view>
    </div>
    <Footer></Footer>
  </div>
</template>

<style scoped lang="scss">
.layout {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  .content_container {
    width: 100%;
    flex: 1;
    margin-top: 60px;
  }
}
</style>
<style scoped lang="scss">
a {
  padding: 20px;
}
.fade-enter-from,
.fade-leave-to {
  /*定义进入开始和离开结束的透明度为0*/
  opacity: 0;
}
.fade-leave-to {
  transform: translateX(20px);
}
.fade-enter-to {
  transform: translateX(-20px);
}
.fade-enter-to,
.fade-leave-from {
  /*定义进入结束和离开开始的透明度为1*/
  opacity: 1;
}
.fade-leave-active,
.fade-enter-active {
  transition: all 0.5s ease-out;
}
</style>